<template>
    <view class="container" ref='canvasWrap'>
    </view>
</template>

<script>
import { Component, Vue, Ref } from 'vue-property-decorator';
import { ThreeHelper } from '../../ThreeHelper/index.js'
import { Main } from './scene'

@Component({
    components: {
    }
})
export default class TODO extends Vue {
    @Ref() canvasWrap;
    helper;
    destroyEvent = [];
    destroy() { this.destroyEvent.forEach(f => f()) };

    mounted() {
        console.log(this.canvasWrap.$el)
        const canvas = document.createElement('canvas');
        this.canvasWrap.$el.appendChild(canvas)
        // const canvas = this.canvas.$el.querySelector('canvas');
        const helper = new ThreeHelper({
            antialias: true,
            canvas,
        });
        this.helper = helper;
        // init(helper);
        new Main(helper);
        this.destroyEvent.push(() => { console.log("销毁") })
    }

    beforeDestroy() {
        this.destroy();
        this.helper.clearScene();
        this.helper.stopFrame();
        this.helper.removeResizeListen();
        this.helper.removeKeyBoardListen();
    }
}
</script>

<style>
.container {
    height: calc(100vh - 44px + env(safe-area-inset-top));
}
</style>